import { Control, ControlProps } from '../common';
import { siteMap } from '../../user/siteMap';
import { MemberService } from "../../user/services/memberService";
import { ImageService } from "maishu-services-sdk";
import React = require('react');

export interface State {
    text?: string,
    type: 'displayLocation' | 'displayStoreName',
    store?: Store,
    showStoreLogo: boolean,
}

export interface Props extends ControlProps<LocationBarControl> {
    // showBalance?: boolean,// = false;
    // showLevel?: boolean,// = false;
    // showScore?: boolean,// = false;
    // sellsCenter?: 'showToMember' | 'showToSells',// = 'showToMember';
}


export default class LocationBarControl extends Control<Props, State>{
    memberService: MemberService;
    imageService: ImageService;
    constructor(props) {
        super(props);
        this.hasCSS = true;

        this.state = { type: "displayStoreName", showStoreLogo: true, };
        this.memberService = this.elementPage.createService(MemberService);
        this.imageService = this.elementPage.createService(ImageService);
    }
    get persistentMembers(): (keyof State)[] {
        return ["showStoreLogo"];
    }
    componentDidMount() {
        this.memberService.store().then(store => {
            this.setState({ store: store })
        })
    }
    _render(h) {
        /**
         * 要在控件设置和控件大小相关的样式，例如 padding，margin，height
         */
        let type = this.state.type;
        if (type == "displayLocation") {
            return this.renderLocation();
        }

        return this.renderStore();
    }

    renderStore() {
        let { store, showStoreLogo } = this.state;
        return <div className="location-bar-store" style={{ padding: 14, height: 50 }}>
            <i className="icon-user pull-right"
                onClick={() => this.app.redirect(siteMap.nodes.user_index)}></i>
            <div className="position interception">
                {showStoreLogo ? <img style={{ width: 18, height: 18 }} className="img-circle"
                    src={this.imageService.imageSource(store ? store.ImagePath : "")} /> : null}
                <span>{store ? store.Name : ""}</span>
            </div>
        </div>
    }

    renderLocation() {
        return <div className="location-bar" style={{ padding: 14 }}>
            <i className="icon-user pull-right"
                onClick={() => this.app.redirect(siteMap.nodes.user_index)}></i>
            <div className="position interception">
                <i className="icon-map-marker"></i>
                <span>暂时获取不到位置信息</span>
                <i className="icon-sort-down" style={{ margin: 0, position: 'relative', left: 6, top: -2 }}></i>
            </div>
        </div>
    }
}